
<template>
  <div class="register">
    <div class="login_tittle">
      <div class="img_url">
        <img src="../../assets/images/FrameBlue.png" alt="" />
      </div>
      <div
        style="
          font-size: 20px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #000000;
          border-left: 2px solid #e6e6e6;
          margin-left: 10px;
          padding: 0 10px;
          /* border: 1px solid red; */
        "
      >
        账号登录
      </div>
    </div>
    <div class="context">
      <div class="context_cintainer">
        <el-form
          label-width="120px"
          ref="ruleFormRef"
          :model="form"
          :rules="rules"
          :hide-required-asterisk="true"
        >
          <el-form-item class="title" label="邀请码:" prop="invite_code">
            <el-input
              v-model="form.invite_code"
              class="el_input"
              placeholder="暂无邀请码"
            />
          </el-form-item>
          <el-form-item style="line-height: 30px">
            <span>如果您是被经纪人邀请入驻，可填写经纪人的邀请码</span>
          </el-form-item>

          <el-form-item class="title" label="企业名称:" prop="name">
            <el-input
              v-model="form.name"
              class="el_input"
              placeholder="希望易货方怎么称呼贵公司，完成企业认证后会自动修正"
            />
          </el-form-item>
          <el-form-item class="title" label="手机号码:" prop="mobile">
            <el-input
              v-model="form.mobile"
              class="el_input"
              placeholder="请输入手机号码"
            />
          </el-form-item>
          <el-form-item class="title" style="" label="验证码:" prop="captcha">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
              "
            >
              <el-input
                style="flex: 1"
                v-model="form.captcha"
                class="el_input"
                placeholder="请输入验证码"
              />
              <div
                style="
                  width: 124px;
                  height: 42px;
                  background: #ffffff;
                  border-radius: 4px 4px 4px 4px;
                  opacity: 1;
                  border: 1px solid #2487e8;
                  color: #2487e8;
                  font-size: 14px;
                  line-height: 42px;
                  text-align: center;
                  margin-left: 10px;
                  cursor: pointer;
                "
                @click="getCode"
              >
                {{ codeText }}
              </div>
            </div>
          </el-form-item>
          <el-form-item class="title" label="联系人:" prop="representative">
            <el-input
              v-model="form.representative"
              class="el_input"
              placeholder="请输入联系人"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="denglu"
              @click="submitForm(ruleFormRef)"
              >注册</el-button
            >
          </el-form-item>
          <el-form-item prop="checked">
            <el-checkbox v-model="form.checked"
              >我已阅读并同意
              <a @click.stop="goUserAgreement(1)">《用户协议》</a> 和
              <a @click.stop="goUserAgreement(2)">《隐私政策》</a></el-checkbox
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <HomePageBottom></HomePageBottom>
    </div>

    <!-- 已经注册 提示框 -->
    <el-dialog
      v-model="centerDialogVisible"
      width="30%"
      align-center
      :show-close="false"
      center
      style="border-radius: 16px 16px 16px 16px"
    >
      <div class="textContent">
        <div class="textContent_zhuce">{{ restOut }}</div>
        <div class="textContent_time">{{ restTime }}</div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            class="el_button"
            style=""
            @click="centerDialogVisible = false"
          >
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import HomePageBottom from "../../components/homePageBottom.vue";
import { Register, SmsSend } from "@/api/login";
const router = useRouter();
const centerDialogVisible = ref(false);
const form = ref({
  invite_code: "",
  name: "",
  mobile: "",
  captcha: "",
  representative: "",
  checked: false,
  event: "register", //注册标识符
});

//手机号码
const validatorUsername = (rule, value, callback) => {
  if (!/^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/.test(value))
    return callback(new Error("请输入正确格式的手机号！"));
  callback();
};

const rules = ref({
  name: [
    { required: true, message: "请输入企业名称", trigger: "blur" },
    { min: 1, max: 20, message: "企业名称最多为20个字", trigger: "blur" },
  ],
  mobile: [
    { required: true, message: "手机号不能为空", trigger: "blur" },

    // validator - 自定义校验规则
    { validator: validatorUsername, trigger: "blur" },
  ],
  captcha: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { min: 4, max: 4, message: "验证码是4位数字", trigger: "blur" },
  ],
  representative: [
    { required: true, message: "请输入联系人", trigger: "blur" },
    { min: 1, max: 5, message: "联系人最多为5个字", trigger: "blur" },
  ],
  checked: [
    {
      required: true,
      message: "请勾选按钮同意隐私政策和服务协议",
      trigger: "blur",
    },
  ],
});
const hasCode = ref(true); //是否获取验证码
const codeText = ref("发送验证码");

//获取手机验证码
const runNum = () => {
  let n = 60;
  let run = setInterval(() => {
    n--;
    if (n < 0) {
      //可以重新获取验证码了
      clearInterval(run);
      hasCode.value = true;
      codeText.value = "重新获取";
    } else {
      codeText.value = n + "s重新获取";
      hasCode.value = false;
    }
  }, 1000);
};
const phoneNumberRegex = /^1[3456789]\d{9}$/;
const getCode = () => {
  if (hasCode.value == false) return;
  if (!form.value.mobile)
    return ElMessage({ message: "请输入手机号", type: "error" });
  if (!phoneNumberRegex.test(form.value.mobile))
    return ElMessage({ message: "请输入正确的手机号码", type: "error" });

  //获取成功之后调用
  SmsSend(form.value)
    .then((res) => {
      if (res.code == 1) {
        runNum();
        ElMessage({ message: res.msg, type: "success" });
      } else {
        ElMessage({ message: res.msg, type: "error" });
      }
    })
    .catch((error) => {});
};
const ruleFormRef = ref();
const restOut = ref("");
const restTime = ref("");
const submitForm = async (formEl) => {
  console.log("formEl", formEl);
  if (!formEl) return;

  if (!form.value.checked)
    return ElMessage({ message: "请勾选协议", type: "error" });

  await formEl.validate((valid, fields) => {
    if (valid) {
      Register(form.value)
        .then((res) => {
          if (res.code == 1) {
          ElMessage({ message: res.msg, type: "success" });
          router.push({
            path: "/login",
            // query: {
            //   flag: "2",
            // },
          });
          }
          if (res.code == 2) {
            centerDialogVisible.value = true;
            restTime.value = res.data.createtime;
            restOut.value = res.msg;
          }

          console.log("成功", res);
        })
        .catch((err) => {
          console.log("err", err);
        });
    } else {
      ElMessage({ message: "请按照规格填写相关内容", type: "error" });
    }
  });
};
//获取用户协议
const goUserAgreement = (type) => {
  const newpage = router.resolve({
    path: "/agreement", // 跳转的页面路由
    query: {
      // 要传的参数
      type: type,
    },
  });
  window.open(newpage.href, "_blank");

  // router.push({
  //   path: "/agreement",
  //   query: {
  //     type: type,
  //   },
  // });
  // UserAgreement()
  //   .then((res) => {
  //     if (res.code == 1) {
  //       ElMessage({ message: res.msg, type: "success" });
  //       console.log("res", res.data.content);
  //     } else {
  //       ElMessage({ message: res.msg, type: "error" });
  //     }
  //   })
  //   .catch((error) => {});
};

defineProps({
  msg: String,
  default: true,
});
</script>



<style scoped lang="less">
//设置选中后的文字颜色
:deep(.el-checkbox__input.is-checked .el-checkbox__label) {
  color: #2487e8 !important;
  // color: black !important;
}
//设置选中后对勾框的边框和背景颜色
:deep(.el-checkbox__input.is-checked .el-checkbox__inner),
.myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #2487e8 !important;
  background-color: #2487e8 !important;
}

.register {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  .login_tittle {
    height: 88px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    // border: 1px solid red;
    padding-left: 120px;
    display: flex;
    // justify-content: center;
    align-items: center;
    .img_url {
      width: 108px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .context {
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    height: calc(100vh - 250px);
    .context_cintainer {
      width: 520px;
      // height: 430px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      margin-top: 100px;
      span {
        height: 22px;
        font-size: 12px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #18bc9f; 
      }
      .title {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.87);
        line-height: 42px;
      }
      .el_input {
        height: 42px;
        background: #f5f5f5;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
      }
      .denglu {
        width: 400px;
        height: 42px;
        background: #2487e8;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        margin-top: 30px;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  .textContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .textContent_zhuce {
      height: 48px;
      font-size: 23px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #141416;
      line-height: 48px;
    }
    .textContent_time {
      height: 48px;
      font-size: 23px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #141416;
      line-height: 48px;
    }
    .el_button {
      width: 352px;
      height: 48px;
      background: #2487e8;
      border-radius: 90px 90px 90px 90px;
      opacity: 1;
    }
  }
  .dialog-footer {
    :deep(.el_button) {
      width: 352px;
      height: 48px;
      background: #2487e8;
      border-radius: 90px 90px 90px 90px;
      opacity: 1;
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #fcfcfd;
    }
  }
}
</style>
